
<template>
  <div class="taikongsha base-background-img">
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img :src="item.img" alt="">
      </li>
    </ul>
    <div class="content">
        <div class="img4" @click="swiper(img4)">
            <img src="static/robot/4/4.png">
        </div>
        <div class="img5" @click="swiper(img5)">
            <img src="static/robot/4/5.png">
        </div>
        <div class="img6" @click="swiper(img6)">
            <img src="static/robot/4/6.png">
        </div>
        <div class="img7" @click="swiper(img7)">
            <img src="static/robot/4/7.png">
        </div>
    </div>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'taikongsha',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        img4: {
          url: 'static/robot/pdf/2/【课程讲义】——房子.pdf',
          data: [{
            isSelected: 1,
            name: '房子—《一双小小手》',
            url: STATICPATH + '/robot/2/太空沙/yishuangxiaoxiaoshou.mp4'
          }]
        },
        img5: {
          url: 'static/robot/pdf/2/【课程讲义】——滚雪球.pdf',
          data: [{
            isSelected: 1,
            name: '滚雪球—《拍手舞》',
            url: STATICPATH + '/robot/2/太空沙/paishouwu.mp4'
          }]
        },
        img6: {
          url: 'static/robot/pdf/3/【课程讲义】——城堡.pdf',
          data: [{
            isSelected: 1,
            name: '城堡—《咚咚和嗵嗵》.mp4',
            url: STATICPATH + '/robot/3/太空沙/dongdonghetongtong.mp4'
          }]
        },
        img7: {
          url: 'static/robot/pdf/3/【课程讲义】——海底世界.pdf',
          data: [{
            isSelected: 1,
            name: '海底世界—《悄悄话》',
            url: STATICPATH + '/robot/3/太空沙/qiaoqiaohua.mp4'
          }]
        },
        tabs: [{
          img: 'static/robot/4/1.png',
          url: 'static/robot/pdf/1/【课程讲义】——缤纷手绘画.pdf',
          data: [{
            isSelected: 1,
            name: '缤纷手绘画—《转一转》',
            url: STATICPATH + '/robot/1/太空沙/zhuanyizhuan.mp4'
          }]
        },
        {
          img: 'static/robot/4/2.png',
          url: 'static/robot/pdf/1/【课程讲义】——光与影（1）.pdf',
          data: []
        }, {
          img: 'static/robot/4/3.png',
          url: 'static/robot/pdf/1/【课程讲义】——光与影（2）.pdf',
          data: []
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.taikongsha > div {
  position: absolute;
  user-select: none;
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 230px;
  left: 190px;
  width: 910px;
  height: 480px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 20px;
  position: initial;
}
.content{
    position: absolute;
    width:950px;
    height:250px;
    top:300px;
    left:190px;
}
.img4{
    left:120px;
    top:65px;
    position: absolute;
    z-index: 100;
}
.img5{
    left:450px;
    top:65px;
    position: absolute;
    z-index: 100;
}
.img6{
    left:250px;
    top:190px;
    position: absolute;
    z-index: 100;
}
.img7{
    left:580px;
    top:190px;
    position: absolute;
    z-index: 100;
}
</style>
